<template>
<div>
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
    >
        <el-form-item label="部门:" prop="DepartmentId">
        <el-select v-model="ruleForm.DepartmentId" placeholder="请选择部门" style="width: 300px" @change="handePosition" disabled>
            <el-option v-for="item in Department" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        </el-form-item>
        <el-form-item label="职位:" prop="PositionId">
        <el-select v-model="ruleForm.PositionId" placeholder="请选择职位" style="width: 300px" @change="handestaff" disabled>
            <el-option v-for="item in Position" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        </el-form-item>
        <el-form-item label="员工姓名:" prop="StaffId">
        <el-select v-model="ruleForm.StaffId" placeholder="请选择员工" style="width: 300px" @change="handePrincipal" disabled>
            <el-option v-for="item in Staff" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        </el-form-item>
        <el-form-item label="上级负责人:" prop="PrincipalId">
        <el-select v-model="ruleForm.PrincipalId" placeholder="请选择上级负责人" style="width: 300px" @change="handePri" disabled>
            <el-option v-for="item in Principal" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        </el-form-item>
        <el-form-item label="入职日期:" prop="Hiredate">
        <el-date-picker
            v-model="ruleForm.Hiredate"
            type="date"
            placeholder="请输入入职日期"
            style="width: 300px"
            disabled
        />
        </el-form-item>
        <el-form-item label="备注:" prop="Remarks">
            <el-input
                v-model="ruleForm.Remarks"
                style="width: 300px"
                :rows="2"
                type="textarea"
                placeholder="请输入备注"
                disabled
            />
        </el-form-item>
        <el-form-item label="审批备注:" prop="Remarks">
            <el-input
                v-model="approval.ApprovalNotes"
                style="width: 300px"
                :rows="2"
                type="textarea"
                placeholder="请输入审批备注"
            />
        </el-form-item>
        <el-form-item label="审批人:" prop="Remarks">
            <el-select v-model="approval.Subgrantor" placeholder="请选择转批人" style="width: 300px">
                <el-option v-for="item in Principal" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button v-if="approval.Subgrantor" type="primary" @click="Approval(1)">同意并转批</el-button>
            <el-button v-else type="primary" disabled>同意并转批</el-button>
            <el-button @click="Approval(2)">拒绝</el-button>
            <el-button type="warning" @click="Approval(3)">同意并终止审批</el-button>
        </el-form-item>
    </el-form>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { TableInstance } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'

const router = useRouter();
const route = useRoute();

const Department = ref([
    { label: '人事部', value: 1 },
    { label: '市场部', value: 2 },
    { label: '财务部', value: 3 },
])

const Positions = ref([
    { label: '部长', value: 1, Parent: 1 },
    { label: '副部长', value: 2, Parent: 1 },
    { label: '经理', value: 3, Parent: 1 },
    { label: '部长', value: 4, Parent: 2 },
    { label: '副部长', value: 5, Parent: 2 },
    { label: '经理', value: 6, Parent: 2 },
    { label: '部长', value: 7, Parent: 3 },
    { label: '副部长', value: 8, Parent: 3 },
    { label: '经理', value: 9, Parent: 3 },
])

const Position = ref()

const handePosition = (item: any) => {
    ruleForm.value.PositionId = null;
    ruleForm.value.StaffId = null;
    ruleForm.value.PrincipalId = null;
    Position.value = Positions.value.filter(positions => positions.Parent == item);
    const selectedPosition = Department.value.find(position => position.value === item);
    if (selectedPosition) {
        ruleForm.value.Department = selectedPosition.label;
    }    
}

interface stafff{
    value: number,
    label:string
}
const Staff = ref<stafff[]>([])

const handestaff = (item: any) => { 
    ruleForm.value.StaffId = null;
    axios.get("/pread/api/ReadRegister/GetUserEntry?PositionId="+item).then(res => {
        Staff.value = res.data.Data
    })
    const selectedPosition = Position.value.find((position:any) => position.value === item);
    if (selectedPosition) {
        ruleForm.value.Position = selectedPosition.label;
    }
}

const Principal = ref()

const handePrincipal = (item: any) => {
    ruleForm.value.PrincipalId = null;
    axios.get("/pread/api/ReadRegister/GetPrincipals", {
        params: {
            DepartmentId: ruleForm.value.DepartmentId,
            StaffId: item
        }
    }).then(res => {
        Principal.value = res.data.Data
    })

    const selectedPosition = Staff.value.find((position:any) => position.value === item);
    if (selectedPosition) {
        ruleForm.value.StaffName = selectedPosition.label;
    }
}

const handePri = (item:any) => {
    const selectedPosition = Principal.value.find((position:any) => position.value === item);
    if (selectedPosition) {
        ruleForm.value.Principal = selectedPosition.label;
    }
}
    
interface RuleForm {
    Id:number,
    Guid:string,
    DepartmentId: number | null,
    Department: string,
    PositionId: number | null,
    Position: string,
    StaffId: number | null,
    StaffName: string,
    PrincipalId: number | null,
    Principal: string,
    Hiredate: Date | null,
    Remarks: string,
    AppStatusL: string,
    Approver: string,
    AppRemarks: string|null,
    AppStatus: string,
    LastDay: Date | null,    
    UpdatedBy: string,
    updatedDate:Date
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    Id: 0,
    Guid: "235345",
    DepartmentId: null,
    Department: "",
    PositionId: null,
    Position: "",
    StaffId: null,
    StaffName: "",
    PrincipalId: null,
    Principal: "",
    Hiredate: null,
    Remarks: "",
    AppStatusL: "",
    Approver: "-",
    AppRemarks: null,
    AppStatus: "",
    LastDay: null,
    UpdatedBy: "",
    updatedDate: new Date
})

const GetTable = () => {
    var id = route.query.id;
    axios.get("/pread/api/ReadEntryManage/GetEntryManage?id="+id).then(res => {
        ruleForm.value.Id = res.data.Data.Id;
        ruleForm.value.Guid = res.data.Data.Guid;
        ruleForm.value.Department = res.data.Data.Department;
        ruleForm.value.Position = res.data.Data.Position;
        ruleForm.value.StaffName = res.data.Data.StaffName;
        ruleForm.value.Principal = res.data.Data.Principal;
        ruleForm.value.Hiredate = res.data.Data.Hiredate;
        ruleForm.value.Remarks = res.data.Data.Remarks;
        ruleForm.value.AppStatusL = res.data.Data.AppStatusL;
        ruleForm.value.Approver = res.data.Data.Approver;
        ruleForm.value.AppRemarks = res.data.Data.AppRemarks;
        ruleForm.value.AppStatus = res.data.Data.AppStatus;
        ruleForm.value.LastDay = res.data.Data.LastDay;
        ruleForm.value.DepartmentId = res.data.Data.DepartmentId;
        handePosition(res.data.Data.DepartmentId)
        ruleForm.value.PositionId = res.data.Data.PositionId;
        handestaff(res.data.Data.PositionId)
        ruleForm.value.StaffId = res.data.Data.StaffId;
        handePrincipal(res.data.Data.StaffId)
        ruleForm.value.PrincipalId = res.data.Data.PrincipalId;
    })
}

interface approvals{
    ApprovalRecordId: number,
    CompanyID: string| null,
    User_Id: number| null,
    ApprovalResult: string| null,
    ApprovalNotes: string| null,
    Subgrantor: string| null,
    Approver: string| null,
    ContractId: number| null,
    MaterialStoreId: number| null,
    MaterialRequisitionId: number| null,
    PaymentId: number| null,
    PersonnelId: number| null
}

const approval = ref<approvals>({
    ApprovalRecordId: 0,
    CompanyID: null,
    User_Id: null,
    ApprovalResult: null,
    ApprovalNotes: null,
    Subgrantor: null,
    Approver: localStorage.username,
    ContractId: null,
    MaterialStoreId: null,
    MaterialRequisitionId: null,
    PaymentId: null,
    PersonnelId: null
})

const Approval = (tes:any) => {
    if (tes == 1) {
        approval.value.ApprovalResult="同意并转批"
    } else if (tes == 2) {
        approval.value.ApprovalResult="拒绝"
    } else {
        approval.value.ApprovalResult="同意并终止审批"
    }
    approval.value.PersonnelId = ruleForm.value.Id
    axios.post("/pwrite/api/Approval/AddEntryApproval",approval.value).then(res => {
        if (res.data > 0) {
            ElMessage({
                message: "审批成功",
                type: "success",
                duration:1000
            })
            router.push("EntryApproval")
        } else {
            ElMessage({
                message: "审批失败",
                type: "warning",
                duration:1000
            })
            router.push("EntryApproval")
        }
    })
}

onMounted(() => {
    GetTable();
})
</script>
<style scoped>
</style>